<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop" style="border:1px solid #CCC" ref="buttondiv">
          <div style="white-space: nowrap;font-size: 12px;color:red">
              &nbsp;&nbsp;&nbsp;&nbsp;提示:双击右边列表中项目添加拒收原因，双击中间列表剔除拒收原因。
          </div>
          <div class="top-deal">
              <el-button @click="btnQuery()" icon="el-icon-search" v-has="'PINQUERY'" type="primary">查询</el-button>
              <el-button icon="el-icon-close" @click="BtnExc">退出</el-button>
          </div>
      </div>
      <div class="pagecenter">
          <rm-layout-left splitcolor="#ffffff" :splitwidth="5" :fixsize="300" :minfixsize="100" :maxfixsize="600">
              <template v-slot:fix>
                  <div class="pagetop">
                      <div class="search-title">拒收归类</div>
                  </div>
                  <div class="pagecenter">
                      <vxe-table show-overflow ref="sysUserXTable" height="auto" border :loading="bsysUserLoading"
                          :sort-config="{ trigger: 'cell' }" :keyboard-config="keyConfig"
                          :keyboard-local-config="keyLocalConfig" :data.sync="left_TableData" size="mini"
                          show-header-overflow highlight-current-row highlight-hover-row resizable stripe
                          header-align="center" @current-change="Left_CurrentChangeEvent">
                          <!-- <vxe-table-column sortable field="value" title="归类代码" width="120px"></vxe-table-column> -->
                          <vxe-table-column sortable field="label" title="归类名称" width="180px">
                          </vxe-table-column>
                      </vxe-table>
                  </div>
              </template>
              <rm-layout-right splitcolor="#ffffff" :splitwidth="5" :fixsize="420" :minfixsize="250"
                  :maxfixsize="700">
                  <div class="pagetop">
                      <div class="search-title">已归类拒收原因</div>
                  </div>
                  <div class="pagecenter">
                      <vxe-table show-overflow ref="centerXTable" height="auto" :loading="bfirstCenterLoading"
                          :sort-config="{ trigger: 'cell' }" :keyboard-config="keyConfig"
                          :keyboard-local-config="keyLocalConfig" :data.sync="center_TableData" border size="mini"
                          show-header-overflow highlight-current-row highlight-hover-row resizable stripe
                          header-align="center" @cell-dblclick="CancelMatch">
                          <vxe-table-column sortable field="codena" title="拒收原因" width="300px"></vxe-table-column>
                      </vxe-table>
                  </div>
                  <template v-slot:fix>
                      <div class="pagetop">
                          <div class="search-title">拒收原因列表</div>
                      </div>
                      <div class="pagecenter">
                          <vxe-table show-overflow ref="wareHouseXTable" :data.sync="right_TableData" height="auto"
                              :loading="bfirstRightLoading" :sort-config="{ trigger: 'cell' }"
                              :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" border size="mini"
                              show-header-overflow highlight-current-row highlight-hover-row resizable stripe
                              header-align="center" @cell-dblclick="Match">
                              <vxe-table-column sortable field="codena" title="拒收原因" width="300px"></vxe-table-column>
                              <vxe-table-column sortable field="sortout_amount" title="归类数" width="70px"
                                  align="center"></vxe-table-column>
                          </vxe-table>
                      </div>
                  </template>
              </rm-layout-right>
          </rm-layout-left>
      </div>
  </div>
</template>

<script>
import XE from "xe-utils";
XE.mixin({
  // 自定义全局的格式化处理函数
  formatSelect(cellValue, list) {
      let item = list.find((item) => item.value == cellValue);
      return item ? item.label : "";
  },
});
export default {
  name: "LIS153",
  data() {
      return {
          rejectclassno: "",
          bsysUserLoading: false,
          bfirstCenterLoading: false,
          bfirstRightLoading: false,
          tempData: [],
          left_TableData: [],
          center_TableData: [],
          right_TableData: [],
          keyLocalConfig: {
              isArrow: true,
          },
          keyConfig: {
              isDel: true,
              isTab: true,
              isEdit: true,
          },
          RejectClassOptions: [],
      };
  },
  created() {
      this.QuerySysUser();
      this.QueryRight()
  },
  mounted() { },
  updated() { },
  methods: {
      //SysUser_行选中事件
      Left_CurrentChangeEvent({ row, $rowIndex }) {
          this.rejectclassno = row.rejectclassno;
          this.QueryCenter();
          // this.QueryRight();
      },
      //查询 (左侧表格)
      QuerySysUser() {
          this.$tool
              .request({
                  url: "LIS/LIS1/LIS153",
                  method: "post",
                  data: {
                      action: "queryallclass",
                  },
              })
              .then((res) => {
                  this.RejectClassOptions = res;
                  this.left_TableData = this.RejectClassOptions;
                  this.Left_QueryFilter();
              })
              .catch((e) => {
                  this.bfirstRightLoading = false;
                  this.$alert(e, { type: "error" });
                  console.log("error", e);
              });
      },
      //模糊查询_左侧表格
      Left_QueryFilter() {
          let row = this.left_TableData[0];
          this.rejectclassno = row.rejectclassno;
          setTimeout(() => {
              if (row) {
                  this.HightLightRow(row, this.$refs.sysUserXTable, "1");
              } else {
                  this.HightLightRow(false, this.$refs.sysUserXTable, "1");
              }
          }, 500);
      },
      //查询(中间表格)
      QueryCenter() {
          this.$tool
              .request({
                  url: "LIS/LIS1/LIS153",
                  method: "post",
                  data: {
                      action: "queryhavereason",
                      rejectclassno: this.rejectclassno
                  },
              })
              .then((res) => {
                  this.center_TableData = res;
                  this.HightLightRow(this.center_TableData[0], this.$refs.centerXTable, "2");
              })
              .catch((e) => {
                  this.bfirstCenterLoading = false;
                  this.$alert(e, { type: "error" });
                  console.log("error", e);
              });
      },
      //查询(右侧表格)
      QueryRight() {
          this.$tool
              .request({
                  url: "LIS/LIS1/LIS153",
                  method: "post",
                  data: {
                      action: "queryallreason",
                  },
              })
              .then((res) => {
                  this.right_TableData = res;
                  //this.WareHouse_QueryFilter();
              })
              .catch((e) => {
                  this.bfirstRightLoading = false;
                  this.$alert(e, { type: "error" });
                  console.log("error", e);
              });
      },
      //添加
      async Match({ row }) {
          try {
              const res = await this.$tool.request({
                  url: "LIS/LIS1/LIS153",
                  method: "post",
                  data: {
                      action: "addreason",
                      rejectclassno: this.rejectclassno,
                      rejectcodeno: row.codeno,
                  },
              });
              if (res.errcode == "1") {
                  this.QueryRight();
                  this.$message({
                      type: "success",
                      message: res.errmsg,
                      showClose: true,
                      duration: 1500,
                  });
                  // this.QueryCenter();
                  var newrow = {
                      codena: row.codena,
                  };
                  this.$refs.centerXTable.insert(newrow).then(({ row }) => {
                      this.HightLightRow(row, this.$refs.centerXTable, "3");
                      this.center_TableData.push(row);
                  });
              } else {
                  this.$alert(e);
              }
          } catch (e) {
              this.bPageInitLoading = false;
          }
      },
      //删除
      async CancelMatch({ row, rowIndex }) {
          try {
              const res = await this.$tool.request({
                  url: "LIS/LIS1/LIS153",
                  method: "post",
                  data: {
                      action: "delreason",
                      rejectclassno: this.rejectclassno,
                      rejectcodeno: row.rejectcodeno,
                      row: row,
                  },
              });
              if (res.errcode == "1") {
                  this.QueryRight();
                  this.$message({
                      type: "success",
                      message: res.errmsg,
                      showClose: true,
                      duration: 1500,
                  });
                  var delrow = this.$refs.centerXTable.getCurrentRow();
                  if (delrow) {
                      var alld = this.$refs.centerXTable.tableData;
                      var rowindex = alld.indexOf(delrow);
                      this.$refs.centerXTable.remove(delrow);
                      this.center_TableData.splice(rowindex, 1);
                      let havedata = this.$refs.centerXTable.tableData;
                      if (havedata.length > 0) {
                          if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                          let selectrow = havedata[rowindex];
                          this.HightLightRow(selectrow, this.$refs.centerXTable, "3");
                      } else {
                          this.HightLightRow(false, this.$refs.centerXTable, "3");
                      }
                  }
              } else {
                  this.$alert(e);
              }
          } catch (e) {
              this.bPageInitLoading = false;
          }
      },
      //查询
      btnQuery() {
          this.QuerySysUser();
          this.QueryRight();
      },
      //设置高亮选中行
      async HightLightRow(row, XTable, flag) {
          if (!!row) {
              XTable.setCurrentRow(row);
              if (flag == "1") {
                  this.rejectclassno = row.rejectclassno;
                  this.QueryCenter();
                  // this.QueryRight();
              }
          } else {
              XTable.setCurrentRow(null);
              if (flag == "1") {
                  this.rejectclassno = "";
              }
          }
      },
      //关闭按钮
      BtnExc() {
          let index = this.$parent.$refs.itemtags.tagsList.findIndex((m) => m.name == "LIS153");
          this.$parent.$refs.itemtags.tagsList.splice(index, 1);
          this.$router.go(-1);
      },
  },
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 37px;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 3px;
  overflow: auto;
}

.search-title {
  margin: 0 2px 0 5px;
  font-size: 13px;
  font-weight: 600;
}

.top-deal {
  right: 5px;
  position: absolute;
  top: 5px;
  display: flex;
  align-items: center;
}

::v-deep tr.vxe-body--row.row--current {
  color: #000000;
  font-weight: bold;
}

::v-deep.vxe-table .vxe-cell {
  white-space: normal;
  word-break: break-word;
  padding: 0 5px;
}
</style>
